<template>
    <div class="homes" ref="homeview" id="header">
        <div class="newsflash">
            <div class="newsflash-title">天气预报</div>
            <div class="card">
                <div style="font-size: 40px;font-weight: bold;margin-top: 20px; ">{{ weather.city }}</div>
                <div class="weather">
                    <img style="width: 85px;height: 85px;" :src="require(`@/assets/weather/${weather.weather}.png`)"/>
                    <div class="weathertext">{{ weather.weather }}</div>
                    <div class="temperature" v-if="weather.temperature">{{ weather.temperature }}&#8451</div>
                </div>
                <div style="font-size: 22px;font-weight: bold;color: #666;display: flex;align-items: center">
                    <div>{{ weather.winddirection }}风{{ weather.windpower }}级</div>
                    <div style="margin-left: 20px;">湿度：{{ weather.humidity }}%</div>
                </div>
                <div class="updateTime">更新时间：{{ weather.reporttime }}</div>
                <div class="_3Days">未来3天</div>
                <div class="future">
                    <div v-for="(item,index) in casts" :key="index">
                        <div class="list-status">星期{{ item.week | weekChinese }}</div>
                        <div class="list-status">{{ item.date | dayTime }}</div>
                        <img style="width: 45px;height: 45px;margin: 10px auto;"
                             :src="require(`../assets/weather/${item.dayweather}.png`)"/>
                        <div class="list-status">{{ item.dayweather }}</div>
                        <div class="list-temp">{{ item.nighttemp }}~{{ item.daytemp }}&#8451</div>
                    </div>
                </div>
                <div style="margin-top: 30px;display: flex;align-items: center">
                    <span style="">切换城市：</span>
                    <!--                    https://element.eleme.cn/#/zh-CN/component/cascader
                    -->
                    <el-cascader
                            placeholder="试试搜索：北京"
                            :options="city"
                            @change="handleCascaderChange"
                            v-model="selectedValues"
                            :props="{ checkStrictly: true,expandTrigger: 'hover' }"
                            filterable
                            :show-all-levels="false">
                    </el-cascader>
                </div>

            </div>
            <!--            <div class="newsflash-title">今日快讯</div>-->
            <!--            <div class="newsflashlist">-->
            <!--                <ul>-->
            <!--                    <li v-for="(item, index) in flash" :key="index">-->
            <!--                        <em></em>-->
            <!--                        <a href="">31省份新增本土确诊病例2028例</a>-->
            <!--                    </li>-->
            <!--                </ul>-->
            <!--            </div>-->

        </div>
        <div class="left">
            <div class="tab">
                <el-tabs
                        style="width: 750px"
                        v-model="activeName"
                        type="card"
                        @tab-click="handleClick"
                >
                    <el-tab-pane
                            v-for="(items,index) in tabList"
                            :key="index"
                            :label="items.label"
                            :name="items.label"
                    >
                        <div v-infinite-scroll="load" infinite-scroll-disabled="disabled" style="overflow:auto">
                            <div class="newlist" v-for="(item, index) in tableData" v-show="item.newclass===items.label"
                                 :key="index">
                                <div class="newleft" @click="toNewcontent(item)">
                                    <div class="top-demo">
                                        {{ item.newtitle }}
                                    </div>
                                    <div class="bottom-demo">
                                        <div> {{ item.newauthor }}</div>
                                        <div>{{ item.comment || 0 }}评论</div>
                                        <div>{{ item.createtime | filtertime }}</div>
                                    </div>
                                </div>
                                <div class="newright" @click="toNewcontent(item)">
                                    <img
                                            :src="item.newimg"
                                            :alt="item.newimg"
                                    />
                                </div>
                            </div>
                            <!--         oashao -->
                            <p v-if="loading" style="margin-top:10px;" class="loading">
                                <span style="font-size:13px;color:#ccc">加载中.......</span>
                            </p>
                            <p v-if="noMore" style="margin-top:10px;font-size:13px;color:#ccc">没有更多了</p>
                        </div>
                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div class="right">
            <div class="block">
<!--                https://element.eleme.cn/#/zh-CN/component/carousel-->
                <el-carousel height="200px">
                    <el-carousel-item v-for="(item,index) in imgList" :key="index">
                        <img style="height: 200px; width: 100%" :src="item.img" alt="" @click="toImgLink(item)"/>
                    </el-carousel-item>
                </el-carousel>
            </div>
            <div class="hotnews">
                <div class="hotsearch">
                    <img src="../assets/hotnews.png" alt=""/>
                    <span>热门新闻</span>
                </div>
                <div class="hotitle">
                    <div class="hotitle-demo" v-for="(item, index) in hotList" :key="index">
                        <span v-if="index == 0" style="color: #fe445a">{{ index }}</span>
                        <span v-else-if="index == 1" style="color: #ff6c0a">{{
                            index
                            }}</span>
                        <span v-else-if="index == 2" style="color: #faa90e">{{
                            index
                            }}</span>
                        <span v-else style="color: #9a9eab">{{ index }}</span>
                        <div class="newtitle" style="font-size: 14px; cursor: pointer">
                            <a @click="toNewcontent(item)">{{ item.newtitle }}</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="friendship">
                <div class="friendsearch">
                    <img src="../assets/frind.png" alt=""/>
                    <span>友情链接</span>
                </div>
                <div class="hotitles">
                    <div class="friend-demo" v-for="(item, index) in link" :key="index">
                        <div @click="tolink(item.linkurl)">{{ item.linkname }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="feedback" @click="feedback">反馈</div>
        <div class="go-top"><a href="#header">UP</a></div>
        <el-dialog
                title="意见反馈"
                :visible.sync="dialogVisible"
                width="30%"
                :before-close="handleClose">
            <el-tabs v-model="active" @tab-click="feedbackSwitching">
                <el-tab-pane label="我要反馈" name="first">
                    <!--      反馈类型-->
                    <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                        <el-form-item label="反馈类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择">
                                <el-option
                                        v-for="item in options"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="反馈内容" prop="content">
                            <el-input type="textarea"
                                      :rows="5"
                                      v-model="form.content" placeholder="请输入内容"></el-input>
                        </el-form-item>
                        <!--        联系方式-->
                        <el-form-item label="联系方式" prop="phone">
                            <el-input v-model="form.phone" placeholder="请输入手机号便于联系（非必填）"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('form')">立即提交</el-button>
                            <el-button @click="resetForm('form')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>
<script>
import {getWeather, getNowWeather} from "@/api/weather";
import {getNewsByType, getHotNews} from "@/api/News";
import {getImgList} from "@/api/Img";
import {getLinkList} from "@/api/Link";
import {getCategoryList} from "@/api/Category";
import {addFeedback} from "@/api/feedback";
//天气 https://restapi.amap.com/v3/weather/weatherInfo?city=110101&key=eefd36557b0250d19d243aea0f62d499&extensions=all
// 接口文档：https://lbs.amap.com/api/webservice/guide/api/weatherinfo/#t1
import moment from 'moment';
import options from "../utils/city";

export default {
    data() {
        return {
            form: {
                type: "",
                content: "",
                phone: "",
            },
            rules: {
                type: [
                    {required: true, message: "请选择反馈类型", trigger: "change"}
                ],
                content: [
                    {required: true, message: "请输入反馈内容", trigger: "blur"}
                ]
            },
            options: [
                {
                    value: "功能建议",
                    label: "功能建议"
                },
                {
                    value: "内容建议",
                    label: "内容建议"
                },
                {
                    value: "其他",
                    label: "其他"
                }
            ],
            active: "first",
            dialogVisible: false,
            weather: [],
            casts: [],//未来几天
            selectedValues: ["柳州"],
            city: JSON.parse(JSON.stringify(options)),
            loading: false,
            activeName: "推荐",
            tabList: [],
            imgList: [],
            link: [],
            pageNum: 1,
            pageSize: 5,
            totalPages: "",//取后端返回内容的总页数
            tableData: [],
            hotList: [],
            flash: [],
        };
    },
    async created() {
        await this.getAllClassList();
        await this.getNewsList();
        await this.handleCascaderChange();
        await this.getAllLinkList();
        await this.getslideshow();
        await this.getHotList();

    },
    filters: {
        filtertime(value) {
            return moment(value).format('YYYY-MM-DD HH:mm:ss');
        },
        weekChinese(value) {
            const weekArr = ['', '一', '二', '三', '四', '五', '六', '日'];
            return weekArr[value] || '';
        },

        dayTime(value) {
            return moment(value).format('MM/DD');
        }
    },
    computed: {
        noMore() {
            //当起始页数大于总页数时停止加载
            return this.pageNum >= this.totalPages - 1;
        },
        disabled() {
            return this.loading || this.noMore;
        }
    },
    methods: {
        // feedback

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.form, 'form')
                    addFeedback(this.form).then((res) => {
                        console.log(res, 'res');
                        this.$message({
                            message: '提交成功',
                            type: 'success'
                        });
                        this.dialogVisible = false;
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        feedback() {
            this.dialogVisible = true;
        }
        ,
        feedbackSwitching() {
            console.log(this.active)
        }
        ,
        handleClose() {
            //清空表单
            this.resetForm('form')
            this.dialogVisible = false;

        }
        ,
        //切换天气并执行请求接口
        handleCascaderChange() {
            console.log(this.selectedValues)
            this.selectedValues = this.selectedValues[this.selectedValues.length - 1];
            getNowWeather(this.selectedValues).then((res) => {
                console.log(res, 'selectedValues)');
                const {lives} = res.data;
                console.log(lives[0], 'lives')
                this.weather = lives[0]

            });
            getWeather(this.selectedValues).then((res) => {
                const {forecasts} = res.data
                this.casts = forecasts[0].casts.slice(1)
            });
        }
        ,
        load() {
            //滑到底部时进行加载
            this.loading = true;
            console.log('到底了')
            setTimeout(() => {
                this.pageNum += 1; //页数+1
                this.getNewsList(); //调用接口，此时页数+1，查询下一页数据
            }, 1000);
        }
        ,
        toImgLink(item) {
            if (!item.imgurl) return
            window.open(item.imgurl, "_blank");
        }
        ,
        toNewcontent(item) {
            this.$router.push({path: '/home/newcontent', query: {newid: item.id}})
        }
        ,
        //获取今日flash
        // getflash() {
        //     this.request({
        //         url: '',
        //         method: 'get',
        //         params: {
        //             pageNum: 1,
        //             pageSize: 1,
        //         },
        //     }).then((res) => {
        //         this.flash = res.records;
        //     });
        // }
        // ,
        getslideshow() {
            getImgList(1, 4).then((res) => {
                this.imgList = res.records;
            });
        }
        ,
        getHotList() {
            getHotNews(1, 10).then((res) => {
                this.hotList = res.records;
            });
        }
        ,
        getNewsList() {
            getNewsByType(this.activeName, this.pageNum, this.pageSize).then((res) => {
                this.tableData = this.tableData.concat(res.records);
                this.totalPages = res.size
                this.loading = false;
            });
        }
        ,
        getAllClassList() {
            if (this.tabList && this.tabList.length > 0) {
                return;
            }
            getCategoryList().then((res) => {
                this.tabList = res;
            });
        }
        ,
        tolink(url) {
            window.open(url, "_blank");
        }
        ,
        getAllLinkList() {
            getLinkList(1, 100).then((res) => {
                this.link = res.records;
            });
        }
        ,
        handleClick() {
            this.pageNum = 1
            this.tableData = [];
            this.getNewsList();
        }
        ,
    },

};
</script>

<style scoped>
.homes {
    width: 1860px;
    height: 100%;
    margin: auto;
    display: flex;

}

.newsflash {
    width: 23%;
    height: 100%;
    margin-left: 4%;
    margin-right: 4%;
}

.card {
    width: 95%;
    background-color: #fff;
    border-radius: 10px;
    /*box-shadow: 0 0 5px rgb(217, 217, 217);*/
    padding: 0 20px;
    margin-bottom: 20px;
}

.newsflash-title {
    font-size: 24px;
    color: rgb(205, 19, 28);
    font-weight: bold;
    margin-bottom: 20px;
}

.newsflashlist {
    margin-left: 10px;
}

.newsflashlist ul li {
    list-style: none;
    display: flex;
    align-items: center;
    padding-bottom: 13px;
}

.newsflashlist ul li a {
    font-size: 16px;
    text-decoration: none;
    color: #666;
}

.newsflashlist ul li em {
    background: url("@/assets/12.jpg") no-repeat 0;
    width: 11px;
    height: 11px;
    padding: 0 5px;
}

.left {
    width: 43.6%;
}

.right {
    width: 21%;
    height: 100%;
}

.right .block {
    padding: 5px;
}

.hotnews {
    padding: 10px;
}

.hotsearch {
    display: flex;
    align-items: center;
    color: #ff4d4d;
    font-size: 18px;
}

.hotsearch img {
    padding-right: 2px;
    width: 20px;
    height: 20px;
}

.hotitle {
    margin-top: 10px;
    padding: 5px;
    border-radius: 10px;
    /*box-shadow: 0 0 5px rgb(217, 217, 217);*/
}

.hotitle-demo {
    display: flex;
    align-items: center;
}

.hotitle-demo span {
    font-size: 18px;
    font-weight: bold;
    padding: 5px 10px;
}

.friendship {
    padding: 0 10px 10px 10px;
}

.friendsearch {
    display: flex;
    align-items: center;
    color: #ff4d4d;
    font-size: 18px;
}

.friendsearch img {
    padding-right: 2px;
    width: 20px;
    height: 20px;
}

.hotitles {
    margin-top: 10px;
    padding: 10px;
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
}

.friend-demo {
    display: inline-block;
    margin: 7px 0 7px 10px;
    padding: 4px 10px;
    box-shadow: 0 0 5px rgb(199, 199, 199);
    border-radius: 10px;
    cursor: pointer;
}

.newlist {
    width: 750px;
    height: 168px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 13px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ccc;
}

.newlist .newleft {
    width: 496px;
    height: 150px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.top-demo {
    font-size: 20px;
}

.bottom-demo {
    color: #999999;
    display: flex;
}

.bottom-demo div {
    padding-right: 20px;
}

.newright {
    width: 240px;
    height: 168px;
    border-radius: 4px;
    padding-left: 20px;
}

.newright img {
    border-radius: 4px;
    width: 240px;
    height: 168px;
}

.newtitle {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.feedback {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 50px;
    right: 100px;
    bottom: 160px;
    cursor: pointer;
    height: 50px;
    width: 50px;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
    font-size: 14px;
    font-weight: bold;
    color: #1989fa;
}

.feedback:hover {
    transform: scale(1.3);
    transition: all 0.4s ease 0s;
    -webkit-transform: scale(1.3);
}

.go-top {
    position: fixed;
    right: 100px;
    bottom: 100px;
    cursor: pointer;
    height: 50px;
    width: 50px;
    background-color: #f2f5f6;
    box-shadow: 0 0 6px rgba(0, 0, 0, .12);
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 28px;
    color: #1989fa;
}

.go-top:hover {
    transform: scale(1.3);
    transition: all 0.4s ease 0s;
    -webkit-transform: scale(1.3);
}

.go-top a {
    text-decoration: none;
    color: #1989fa;
}

.weather {
    margin: 20px 0;
    font-size: 45px;
    display: flex;
    color: #666;
    align-items: center;
    justify-content: start;
}

.weathertext {
    margin: 0 15px;
}

.future {
    display: flex;
    text-align: center;
    justify-content: space-between;
}

._3Days {
    margin: 20px 0;
    font-style: italic;
    font-size: 18px;
    font-weight: bold;
    color: #5f5f5f;
}

.updateTime {
    font-size: 16px;
    color: #999;
    margin-top: 10px;
}

.list-status {
    font-size: 14px;
    line-height: 19px;
    color: #222222;
}

.list-temp {
    font-size: 16px;
    font-weight: bold;
    padding-top: 8px;
}

</style>
